<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="bg-white p-3 borderBottom sticky top-0 z-[99]">
      <u-search
        v-model="searchData.keyword"
        shape="square"
        height="80rpx"
        placeholder="诊所名称 / 负责人姓名 / 电话"
        :animation="true"
        @search="search"
        @custom="search"
        @clear="search"></u-search>
    </view>
    <view class="bg-white">
      <view
        v-for="(item, index) in dataList"
        :key="item.id"
        class="flex mx-3"
        :class="{ borderBottom: index + 1 !== dataList.length }"
        @click="goDetail(item)">
        <!-- 是否来选择机构 -->
        <view v-if="isCheckPage" class="flex items-center flex-shrink-0 pr-3">
          <i
            class="text-xl iconfont"
            :class="selectedCom.id === item.id ? 'u-primary' : 'u-info'">
            {{ selectedCom.id === item.id ? '&#xe615;' : '&#xe623;' }}
          </i>
        </view>
        <view class="flex-grow">
          <UserCard
            :avatar="item.cimg1"
            avatarClass="w-14 h-14 rounded"
            :userName="item.cname">
            <template #content>
              <view class="flex items-center pt-1 u-content-color">
                <i class="iconfont">&#xe613;</i>
                <text class="pl-1">{{ item.address }}</text>
              </view>
            </template>
            <template v-if="item.verifyLog" #status>
              <u-tag
                :text="item.verifyLog.verifyStatus === 1 ? '已认证' : (item.verifyLog.verifyStatus === 2 ? '认证失败' : '认证中')"
                :type="item.verifyLog.verifyStatus === 1 ? 'primary' : (item.verifyLog.verifyStatus === 2 ? 'error' : 'warning')"
                size="mini"
                plain
                plainFill />
            </template>
          </UserCard>
        </view>
      </view>
    </view>

    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="2" />
    <LoadMore v-else :status="loadStatus" />
    <HoverBall />
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import HoverBall from '@/components/hoverBall.vue'
import { companyList } from '@/api/organization'
import { usePageList } from '@/hooks/usePageList'
import { OrganizationItemTypes } from '@/types/organization'
import Empty from '@/components/empty.vue'
import LoadMore from '@/components/loadMore.vue'
import { useExpertStore } from '@/stores/expert'
import { OrganizationStatusEnum } from '@/utils/enums'
import { refreshOnLoad } from '@/hooks/refreshPage'

const expertStore = useExpertStore()
const { selectedCom } = storeToRefs(expertStore) // 获取已选择机构

// 查询列表参数
const searchData = reactive({
  keyword: ''
})

// 获取列表
const {
  getList,
  search,
  list: dataList,
  status: loadStatus
} = usePageList<OrganizationItemTypes>((params) =>
  companyList({ ...params, ...searchData })
)

// 查看机构详情
const goDetail = (item: OrganizationItemTypes) => {
  if (unref(isCheckPage)) {
    const { setSelectCom } = expertStore
    setSelectCom(item)
    uni.$u.route({
      type: 'navigateBack',
      delta: 1
    })
  } else {
    uni.$u.route({
      type: 'navigateTo',
      url: '/pages/organization/organizationDetail',
      params: {
        id: item.id
      }
    })
  }
}

const isCheckPage = ref<boolean>(false) // 是否为选择页面
onLoad((options) => {
  getList()
  isCheckPage.value = options?.isCheckPage
});
onShow(() => {
  refreshOnLoad(async() => { 
    await search() 
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  });
});

// 下拉刷新
onPullDownRefresh(async () => {
  try {
    await search()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  } catch (error) {
    uni.stopPullDownRefresh()
  }
})
// 加载更多
onReachBottom(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>
